<template>
  <view class="api-page">
    <button type="primary" @click="setStorage">存储数据</button>
    <button type="primary" @click="getStorage">获取数据</button>
    <button type="primary" @click="removeId">移除id</button>
    <!-- #ifdef H5 -->
    <view>我希望只在H5页面中看见</view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>我希望只在微信小程序页面中看见</view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view>我希望只在APP页面中看见</view>
    <!-- #endif -->
    <button @click="pullDown">下拉刷新</button>
    <view>这是列表页</view>
    <view class="box-item" v-for="item in list">
      {{item}}
    </view>
    <button type="primary" @click="chooseImg">上传图片</button>
    <image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['前端', 'JAVA', 'UI', '测试', '大数据'],
      imgArr: []
    }
  },
  onLoad(options) {
    console.log('页面加载了', options)
    // #ifdef H5
    console.log('我希望h5中打印')
    // #endif
    // #ifdef MP-WEIXIN
    console.log('我希望微信小程序中打印')
    // #endif
  },
  onShow() {
    console.log('页面显示了')
  },
  onReady() {
    console.log('页面初次渲染完成了')
  },
  onHide() {
    console.log('页面隐藏了')
  },
  onUnload() {
    console.log('页面卸载了')
  },
  onPullDownRefresh() {
    console.log('触发了下拉刷新')
    setTimeout(() => {
      this.list = ['JAVA', 'UI', '前端', '测试', '大数据']
      uni.stopPullDownRefresh()
    }, 2000)
  },
  onReachBottom() {
    console.log('页面触底了')
    this.list = [...this.list, ...['JAVA', 'UI', '前端', '测试', '大数据']]
  },
  methods: {
    setStorage() {
      uni.setStorageSync('id', 100)
    },
    getStorage() {
      uni.getStorage({
        key: "id",
        success(res) {
          console.log('异步获取成功', res.data)
        }
      })
      const res = uni.getStorageSync('id')
      console.log('同步获取结果', res)
    },
    removeId() {
      uni.removeStorage({
        key: 'id',
        success() {
          console.log('异步移除成功')
        }
      })
      uni.removeStorageSync('id')
    },
    pullDown() {
      console.log('开启下拉刷新')
      uni.startPullDownRefresh()
    },
    chooseImg() {
      uni.chooseImage({
        count: 5,
        success: res => {
          this.imgArr = res.tempFilePaths
        }
      })
    },
    previewImg(current) {
      uni.previewImage({
        current,
        urls: this.imgArr,
        loop: true,
        indicator: 'default'
      })
    }
  }
}
</script>

<style>
.api-page {
  padding: 20upx;
}
.box-item {
  margin: 10upx 0;
  padding: 10upx;
  background-color: #f5f5f5;
  height: 100px;
  line-height: 100px;
}
/* h5中的样式 */
/* #ifdef H5 */
view {
  color: hotpink;
}
/* #endif */
/* 微信小程序中的样式 */
/* #ifdef MP-WEIXIN */
view {
  color: #0000FF;
}
/* #endif */
</style>